import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Select, DatePicker, Table, Button, TreeSelect, Popconfirm, Row, Col, } from 'antd';
var _this, _props, _state;

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class AddTransferDetailModal extends Component {
  constructor(props) {
    super(props);
  }

  addTransferDetailHandler = () => {
    const { addTransferDetailHandler } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        addTransferDetailHandler(values);
        this.props.form.resetFields();
      }
    });
  };

  handleRoomChange = (value) => {
    const { dispatch } = this.props;
    this.props.form.setFieldsValue({ targetRackId: undefined });
    dispatch({
      type: 'transfer/qryRackList',
      payload: value,
    })
  };

  handleDatacenChange = (value) => {
    const { dispatch } = this.props;
    this.props.form.setFieldsValue({ targetRoomId: undefined });
    dispatch({
      type: 'transfer/queryRoom',
      payload: { datacenterId: value },
    })
  };
  handleTransferTypeChange = (value) => {
    const { dispatch ,item} = this.props;
    if (value == 1) {
      this.props.form.setFieldsValue({ datacenterId: item.datacenterId_ });
      this.props.form.setFieldsValue({ targetRoomId: item.roomId_ });
      this.props.form.setFieldsValue({ targetRackId: item.rackId_ });
      dispatch({
        type: 'transfer/qryRackList',
        payload: item.roomId_,
      })
    } else {
      this.props.form.setFieldsValue({ datacenterId: undefined });
      this.props.form.setFieldsValue({ targetRoomId: undefined });
      this.props.form.setFieldsValue({ targetRackId: undefined });
    }
  };
  handlerUseBranchChange=(value)=>{
    const { dispatch} = this.props;
    dispatch({
      type: 'transfer/qryUserByDept',
      payload: {deptId:value },
    });   
  }

  render() {
    const { children, detailList, assetList, id, item, roomList,deptUserList, deptList, rackList, dataCenterList } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };

    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }

    const loop = data => data.map((item) => {
      if (item.depts && item.depts.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''}>{loop(item.depts)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });

    const getRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
      return <Option key={item.id_}>{item.name}</Option>
    })

    const getRack = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.assetName}</Option>
    })

    const getBrand = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    })

    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          visible={this.props.visible}
          width={1000}
          onOk={this.addTransferDetailHandler}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{}}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>

                <Form layout="horizontal" onSubmit={this.addTransferDetailHandler}>
                  <FormItem style={{ marginBottom: '0px' }}>
                    {getFieldDecorator('addDetailAssetId', { initialValue: item.id_ })(
                      <Input type="hidden" />
                    )}
                  </FormItem>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label="目标管理部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetManageBranchId', {
                            initialValue: item.manageBranchId_? item.manageBranchId_+ '':undefined,
                            rules: [{
                              required: true, message: '请选择目标管理部门',
                            }]
                          })(
                            <TreeSelect

                              showSearch
                              treeNodeFilterProp="title"
                              style={{ width: 200 }}
                              notFoundContent="无匹配结果"
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="目标管理部门"
                              allowClear
                              treeDefaultExpandAll
                              treeData={treeData(deptList)}
                            >
                             
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label="目标领用部门"
                        hasFeedback>
                        {
                          getFieldDecorator('targetUseBranchId', {
                            initialValue: item.useBranchId_?item.useBranchId_+ '':undefined,
                            rules: [{
                              required: true, message: '请选择目标领用部门',
                            }]
                          })(
                            <TreeSelect
                              showSearch
                              treeNodeFilterProp="title"
                              style={{ width: 200 }}
                              notFoundContent="无匹配结果"
                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                              placeholder="目标领用部门"
                              allowClear
                              onChange={this.handlerUseBranchChange}
                              treeDefaultExpandAll
                              treeData={treeData(deptList)}
                            >
                            </TreeSelect>
                            )
                        }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label='目标领用人'
                        hasFeedback
                      >
                        {getFieldDecorator('targetEndUser', {
                          initialValue: item.endUser ? item.endUser : undefined,
                          rules: [{
                            required: true, whitespace: true, message: '请选择目标领用人',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 200 }}
                            placeholder="目标领用人"
                            // labelInValue
                            optionFilterProp="children"
                          >
                            {getUser(deptUserList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label="迁移类型"
                        hasFeedback
                      >
                        {getFieldDecorator('transferType', {
                          initialValue: item.transferType?item.transferType:'1',
                          rules: [{
                            required: true, whitespace: true, message: '请选择迁移类型',
                          }]
                        })(
                          <Select
                            showSearch
                            style={{ width: 200 }}
                            onChange={this.handleTransferTypeChange}
                            placeholder="请选择迁移类型"
                            optionFilterProp="children"

                          >
                            <Option value='1'>内部迁移</Option>
                            <Option value='2'>外部迁移</Option>
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label='目标起始U'
                        hasFeedback>
                        {getFieldDecorator('targetStart', {
                          initialValue: item.startU? item.startU+ '':undefined,
                          rules: [{
                            required: true, whitespace: true, message: '请输入目标起始U',
                          }]
                        })(
                          <Input type="number" placeholder="目标起始U" style={{ width: '200px' }} />
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label='目标结束U'
                        hasFeedback>
                        {getFieldDecorator('targetEnd', {
                          initialValue: item.endU?item.endU + '':undefined,
                          rules: [{
                            required: true, whitespace: true, message: '请输入目标结束U',
                          }]
                        })(
                          <Input type="number" placeholder="目标结束U" style={{ width: '200px' }} />
                          )}
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={16} >
                    <Col span={8}>
                      <FormItem
                        label="数据中心"
                        hasFeedback
                        {...formItemLayout}
                      >
                        {getFieldDecorator('datacenterId', {
                          initialValue: typeof (item.datacenterId_) == "undefined" ? undefined : item.datacenterId_ + '',
                          rules: [
                            { required: true, message: '请选择数据中心' },
                          ],
                        })(
                          <Select
                            onChange={this.handleDatacenChange}
                            style={{ width: 200 }}
                            showSearch
                            placeholder="数据中心"
                            disabled={this.props.form.getFieldValue("transferType") == '1' ? true : false}>
                            {getBrand(dataCenterList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label='目标机房'
                        hasFeedback
                      >
                        {getFieldDecorator('targetRoomId', {
                          initialValue: item.roomId_? item.roomId_+ '':undefined,
                          rules: [{
                            required: true, message: '请选择目标机房',
                          }]
                        })(
                          <Select
                            showSearch
                            // labelInValue
                            allowClear
                            onChange={this.handleRoomChange}
                            style={{ width: 200 }}
                            placeholder="目标机房"
                            optionFilterProp="children"
                            disabled={this.props.form.getFieldValue("transferType") == '1' ? true : false}
                          >
                            {getRoom(roomList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem
                        {...formItemLayout}
                        label='目标机柜'
                        hasFeedback
                      >
                        {getFieldDecorator('targetRackId', {
                          initialValue: item.rackId_?item.rackId_ + '':undefined,
                          rules: [{
                            required: true, message: '请选择目标机柜',
                          }]
                        })(
                          <Select
                            showSearch
                            // labelInValue
                            style={{ width: 200 }}
                            placeholder="目标机柜"
                            optionFilterProp="children"
                          >
                            {getRack(rackList)}
                          </Select>
                          )}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>

            </div>
          </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddTransferDetailModal)
